<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <router-link
                v-perms="['user.group/saveGroup']"
                :to="{path: getRoutePath('user.group/groupInfo')}"
            >
            <el-button type="primary" class="mb-4">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
                新建群聊
            </el-button>
            </router-link>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号(ID)" type="index" :index="indexAdd" min-width="100" />
                <el-table-column label="群聊名称" min-width="180" prop="group.name"/>
                <el-table-column label="管理员名称" min-width="180" prop="group.userinfo.realname"/>
                <el-table-column label="管理员账户" min-width="180" prop="group.userinfo.account"/>
                <el-table-column label="群聊人数" min-width="180" prop="group_user"/>
                <el-table-column label="进群状态" min-width="180" prop="status">
                    <template #default="{row}">
                        <span v-if="row.status == 0">不可加入</span>
                        <span v-if="row.status == 1">可加入</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" min-width="180" prop="create_time"/>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{row}">
                        <router-link
                            v-perms="['user.group/groupInfo']"
                            :to="{ path: getRoutePath('user.group/groupInfo'), query: { id: row.group_id } }"
                        >
                            <el-link v-perms="['user.group/groupInfo']" type="primary" :underline="false" class="mr-4">编辑</el-link>
                        </router-link>
                        <el-link v-perms="['user.agent/saveGroup']" type="primary" :underline="false" class="mr-4" @click="open(row.id, row.status)">绑定群聊</el-link>
                        <el-switch v-model="row.status" v-perms="['user.agent/openGroup']" @change="toggleStatus(row.id, row.status)" :active-value="1" :inactive-value="0" />
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="group">
import {groupList,saveGroup,openGroup} from '@/api/agent'
import { getRoutePath } from '@/router'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
const queryParams = reactive({})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: groupList,
    params: queryParams
})

const indexAdd = (index: number) => {
    const page = pager.page // 当前页码
    const pagesize = pager.size // 每页条数
    return index + 1 + (page - 1) * pagesize
}

getLists()

const toggleStatus = async (id:any,status:any) => {
    console.log(status)
    await openGroup({
        id,
        status
    })
    getLists()
}

const open = (id:any, status: any) => {
    feedback.prompt('菜单栏——群聊管理——群聊列表，获取群ID', '绑定群聊', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        inputPattern:/^[1-9]\d*$/,
        inputErrorMessage: '请填写数字',
    }).then(async ({ value }) => {
        await saveGroup({
            id,
            group_id: value,
            status
        })
        feedback.msgSuccess('绑定成功')
        getLists()
    })
    .catch(() => {

    })
}

</script>
<style scoped lang="scss">

</style>